<template>

  <div style="width: 99%">
    <div >
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>系统管理</el-breadcrumb-item>
        <el-breadcrumb-item>角色管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div style="float: left;margin-top: 8px;margin-bottom: 8px">
      <el-button type="primary" @click="_add">添加</el-button>
    </div>

    <div style="margin-top: 20px">
      <EleTable ref="sysRoleTableRef"
                url="/api/base/sys_role/page_vo"
                :columnName="columnName"
                :queryObj="queryObj"
                :optList="optList"
                @opt-click="_opt"
      >

      </EleTable>
<!--      <el-table-->
<!--        :data="getPage"-->
<!--        border-->
<!--        height="500"-->
<!--        style="width: 100%">-->
<!--        <el-table-column v-for="item in columnName" :key="item.id" :label="item.label" >-->
<!--          <template slot-scope="scope">-->
<!--            <span>{{scope.row[item.prop]}}</span>-->
<!--          </template>-->
<!--        </el-table-column>-->
<!--        <el-table-column-->
<!--          fixed="right"-->
<!--          label="操作"-->
<!--          width="150">-->
<!--          <template slot-scope="scope">-->
<!--            <el-button @click="_bindMenu(scope.row)" type="text" size="small">菜单</el-button>-->
<!--            <el-button @click="_bindUser(scope.row)" type="text" size="small">用户</el-button>-->
<!--            <el-button type="text" @click="_edit(scope.row)"  size="small">编辑</el-button>-->
<!--          </template>-->
<!--        </el-table-column>-->
<!--      </el-table>-->
<!--      <el-pagination-->
<!--        @size-change="handleSizeChange"-->
<!--        @current-change="handleCurrentChange"-->
<!--        :current-page="currentPage"-->
<!--        :page-sizes="[5, 10, 20, 40]"-->
<!--        :page-size="pageSize"-->
<!--        layout="total, sizes, prev, pager, next, jumper"-->
<!--        :total="total">-->
<!--      </el-pagination>-->


    </div>

    <SysRoleEdit ref="sysRoleEditRef"  @on-result-change="_page"></SysRoleEdit>
    <SysRoleRelUser ref="sysRoleRelUseRef"  @on-result-change="_page"></SysRoleRelUser>
    <SysRoleRelMenu ref="sysRoleRelMenuRef"  @on-result-change="_page"></SysRoleRelMenu>
  </div>

</template>

<script>

  import  SysRoleEdit from  './SysRoleEdit'
  import  SysRoleRelUser from  './SysRoleRelUser'
  import  SysRoleRelMenu from  './SysRoleRelMenu'
  import EleTable from "../../../common/EleTable.vue";
  export default {
    components:{
      EleTable,
      SysRoleEdit,
      SysRoleRelUser,
      SysRoleRelMenu,
    },
    mounted(){
    },
    name: "Home",
    data(){
      return {

        currentPage:1, //初始页
        pageSize:10,    //    每页的数据
        total:0,    //    每页的数据
        getPage:[],
        queryObj:{},
        columnName:[
          {prop:"roleName",label:"角色名称",width:"120",fixed:true},
          {prop:"parentName",label:"上级角色",width:"120"},
        ],
        optList:[
          {name:"菜单",key:'bindMenu'},
          {name:"用户",key:'bindUser'},
          {name:"编辑",key:'edit'},
        ]
      }
    },
    methods:{
      handleClick(data){
        console.log(data);
      },

      handleSizeChange(val) {
        this.pageSize=val;
        this._page();
      },
      handleCurrentChange(val) {
        this.currentPage=val;
        this._page();
      },
      _opt(data,key){
        switch (key){
          case 'edit':
            this._edit(data);
            break;
          case 'bindMenu':
            this._bindMenu(data);
            break;
          case 'bindUser':
            this._bindUser(data);
            break;
        }
      },
      _add(){
        this.$refs.sysRoleEditRef._open();
      },

      _edit(row){
        console.log(row);
        this.$refs.sysRoleEditRef._open(row);
      },

      _bindUser(row){
        this.$refs.sysRoleRelUseRef._open(row);
      },

      _bindMenu(row){
        this.$refs.sysRoleRelMenuRef._open(row);
      },

      _page(){
        this.$refs.sysRoleTableRef._page();
      },

    },
  }
</script>

<style scoped>

</style>
